<template>
  <el-row>
    <el-col :span="3" :offset="21">
      <div class="use" v-show="!$store.getters.getUserInfo.username">
        <el-button type="text" @click="click('login')">登录</el-button>
        <span> | </span>
        <el-button type="text" @click="click('register')">注册</el-button>
      </div>
    </el-col>
    <el-col :span="3" :offset="21">
      <div class="use" v-show="$store.getters.getUserInfo.username">
        <el-dropdown trigger="click">
          <el-avatar class="head-portrait">{{ $store.getters.getUserInfo.username && $store.getters.getUserInfo.username.substr(0, 4) }}</el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toViewInfo">查看信息</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
  
  <!-- 
  :state="state.visible ? state : (dialogState ? dialogState : state)"
  :state="dialogState ? (dialogState.visible ? dialogState : state) : state" 
   -->
  <login-dialog
    :state="state.visible ? state : (dialogState ? dialogState : state)"
  >
  </login-dialog>
  <user-info-dialog :state="userInfoState"></user-info-dialog>
</template>

<script>
import { ref, reactive, defineComponent } from "vue"
import LoginDialog from "./LoginDialog.vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import UserInfoDialog from "@c/navBar/user/UserInfoDialog.vue"
import { ElMessage } from "element-plus"
import { Logout } from "@/api/axios/user"

export default defineComponent({
  name: "Login",
  props: {
    dialogState: {
      type: Object,
      required: false
    }
  },
  components: {
    LoginDialog,
    UserInfoDialog
  },
  setup(props) {
    
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    
    // 注册登录组件属性值
    const state = reactive({
      name: '',
      visible: false,
    })

    // 点击登录或注册按钮
    const click = (name) => {
      state.name = name
      state.visible = true
    }
    
    const toViewInfo = () => {
      // router.push("/home");
      userInfoState.visible = true;
    }
    
    const logout = () => {
      // 不管成不成功
      Logout(store.getters.getUserInfo.username).then(res => {
        // 这里放里边是因为 不放里边 运行 Logout 的时候 下边已经运行 store 以及被清除，会没有 token 导致后端删除 token 失败 
        // 后端接收到参数不管怎样都返回 成功，让前端下线，后端 redis 占一个就占一个
        store.commit("logout")
        ElMessage.success("注销成功")
        
        // 如果是管理员界面退出，返回主页
        if(route.path === "/admin") {
          router.push("/");
        }
      })
    }
    
    const userInfoState = reactive({
      visible: false
    })
    
    return {
      state,
      click,
      toViewInfo,
      logout,
      userInfoState,
    }
  }
})

</script>

<style scoped>
.use {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 3px;
}
.head-portrait {
  cursor: pointer;
}
</style>
